<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


<title>Fitness - Free Bootstrap 4 Template</title>

<!-- Bootstrap core CSS -->
<link href="./css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./css/custom.css" rel="stylesheet">

<!-- Helper Styles -->
<link href="./css/loaders.css" rel="stylesheet">
<link href="./css/swiper.min.css" rel="stylesheet">
<link rel="stylesheet" href="./css/animate.min.css">
<link rel="stylesheet" href="./css/nivo-lightbox.css">
<link rel="stylesheet" href="./css/nivo_themes/default/default.css">
<!-- Font Awesome Style -->
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<link href="./css/index.css" rel="stylesheet">


</head>
<body>


<!-- Top Navigation -->
    <nav class="navbar navbar-toggleable-md mb-4 top-bar navbar-static-top sps sps--abv">
        <div class="container">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse1" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">恋尚<span>健身</span></a>
      <div class="collapse navbar-collapse" id="navbarCollapse1">
        <ul class="navbar-nav ml-auto">
        <li class="nav-item active"> <a class="nav-link" href="#index">首页<span class="sr-only">(current)</span></a> </li>
        <li class="nav-item"> <a class="nav-link" href="#course">课程</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#equipment">器材</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#category">商品分类</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#recharge">会员充值</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#personal-center">个人中心</a></li>
        <li class="nav-item"> <a class="nav-link" href="#contact">在线留言</a> </li>
       <li class=""> <a class="nav-link" href="./loginRegister.jsp">退出登录</a> </li>
        </ul>
      </div>
            </div>
    </nav>


<!-- 幻灯片主容器 -->
<div class="swiper-container main-slider" id="index">
  <div class="swiper-wrapper">
    <!-- 幻灯片1 -->
    <!--  data-hash="slide1"   可以用于通过URL锚点直接定位到特定的幻灯片 -->
    <div class="swiper-slide slider-bg-position" style="background:url('./img/1.jpg')" data-hash="slide1">
      <h2>健康才是真正的财富，而不是金银财宝</h2>
    </div>
    <!-- 幻灯片2 -->
    <div class="swiper-slide slider-bg-position" style="background:url('./img/3.jpg')" data-hash="slide2">
      <h2>幸福只不过是良好健康和糟糕记忆而已</h2>
    </div>
  </div>
  <!-- 添加分页器 -->
  <div class="swiper-pagination"></div>

  <!-- 导航按钮 -->
  <div class="swiper-button-prev"><i class="fa fa-chevron-left"></i></div>
  <div class="swiper-button-next"><i class="fa fa-chevron-right"></i></div>
</div>


<!--课程信息 -->
<section class="service-sec" id="course">  
  <div class="box">  
    <div class="row">  
        <div class="col-md-12">  
            <div class="heading text-md-center text-xs-center">  
            <p class="xiaobiaoti">课程安排</p>
                <h2>查看一周内的健身课程安排，能够在线预约课程</h2>  
            </div>  
        </div>  
        <!-- 添加一个课程列表的容器 -->  
        <div class="col-md-8">  
            <ul class="row" id="courseList">  
                <!-- 假设这里放置课程列表，每个课程是一个service-block -->  
              
                	  
            </ul>  
        </div>  
        
	  <div id="myModal" class="myModal">
			  <div class="modalcontent">
			    <span class="closecourse" onclick="closeModal()">&times;</span>
			    <p>姓名: <input type="text" id="name"></p>
			    <p>电话: <input type="text" id="phone"></p>
			    <button id="submitButton" onclick="submitForm()">确定</button>
			  </div>
       </div>

        <div class="col-md-4">  
            <!-- 假设这里放置与课程相关的图片或广告 -->  
            <img src="./img/side-01.jpg" class="img-fluid" alt="课程相关图片" style="margin-top: 50px;">
        </div>  
    </div>  
    <!-- /.row -->  
  </div>  
</section>



<!-- 器材  -->
<section class="blog-sec" id="equipment">
   <div class="box w">
        <div class="box-hd">
            <p class="xiaobiaoti">精品器材推荐</p>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">
   
            </ul>
        </div>
    </div>
</section>





<!--  商品分类 -->

<section class="blog-sec" id="category">
<div class="box">
  <div class="container" >
     <p class="xiaobiaoti">商品推荐</p> 
       <nav class="navbar-shangpin">
          <div class="fenlei">
		   <ul class="nav-list">
		    <li><a href="#1">饮料</a></li>
		    <li><a href="#8">水果</a></li>
		    <li><a href="#15">休闲零食</a></li>
		    <li><a href="#protein-supplements">蛋白质补充剂</a></li>
		    <li><a href="#fitness-equipment">运动器材</a></li>
		    <li><a href="#nutrition-meals">营养餐</a></li>
		    <li><a href="#yoga-gear">瑜伽用品</a></li>
        </ul>
     </div>
   
  <div class="search-box">
    <input type="text" id="searchInput" placeholder="搜索">
    <button id="searchButton">搜索</button>
  </div>
</nav>
<ul class="fenleishuju">
</ul>	
</div>


<!-- 购买详情 -->
<!-- 弹框部分 -->
<div class="modal" style="display: none;">
    <div class="modal-content">
        <span class="close">&times;</span>
        <img id="modal-img" src="" alt="商品图片">
        <p id="modal-price">价格：￥<span id="item-price"></span></p>
        <div class="quantity-container">
            <span class="number">数量：</span>
            <input type="number" id="quantity-input" value="1" min="1">
        </div>
        <p id="total-price">总价：￥<span id="calculated-total-price"></span></p>
        <button id="checkout-btn">结算</button>
    </div>
</div>
</div>
</section>


<!-- VIDEO-->
<section class="video-sec parallax-section">
  <div class="overlay"></div>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2 class="wow fadeInUp" data-wow-delay="0.5s">Watch the video<small>Without health life is not life; it is only a state of langour and suffering - an image of death.</small></h2>
        <a href="#" ><i class="fa fa-play"></i></a> <small><em>Video by: Health Tips</em></small> </div>
    </div>
  </div>
</section>


<!-- 会员充值 -->
<section class="gallery-sec" id="recharge">
<div class="box">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="heading text-md-center text-xs-center">
         <p class="xiaobiaoti">会员充值</p> 
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-12"> 
        <!-- 充值选项 -->
        <div class="recharge-options">
          <h3>选择充值金额：</h3>
          <div class="btn-group" role="group" aria-label="充值金额选择">
            <button type="button" class="btn btn-outline-primary">50 元</button>
            <button type="button" class="btn btn-outline-primary">100 元</button>
            <button type="button" class="btn btn-outline-primary">200 元</button>
            <button type="button" class="btn btn-outline-primary">500 元</button>
          </div>
        </div>

        <!-- 支付方式 -->
        <div class="payment-methods">
          <h3>选择支付方式：</h3>
          <div class="btn-group" role="group" aria-label="支付方式选择">
            <button type="button" class="btn btn-outline-secondary">扫码支付</button>
            <button type="button" class="btn btn-outline-secondary">输入密码支付</button>
          </div>
        </div>
        
        <!-- 支付表单 -->
        <div id="payment-form2">
          <div class="form-group">
            <label for="amount">支付金额：</label>
            <input type="text" class="form-control" id="amount" name="amount" readonly>
          </div>
         
          <button type="button" class="btn btn-primary" id="zhf">确认支付</button>
        </div>
        <div id="nirong"></div>
      </div>
    </div>
  </div>
  </div>
</section>




<!-- 个人中心 -->
  <section class="personal-center" id="personal-center">
  <div class="box">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="heading text-md-center text-xs-center">
            <p class="xiaobiaoti">个人中心</p> 
          </div>
        </div>
      </div>

      <!-- 显示剩余健身次数 -->
      <div class="row">
        <div class="col-md-12">
          <div class="remaining-sessions">
            <h3>剩余健身次数：</h3>
            <p style="font-size:22px;">你还有 <span id="remaining-sessions-count">10</span> 次健身课。</p>
          </div>
        </div>
      </div>

      <!-- 我的预约（课程） -->
      <div class="row">
        <div class="col-md-12">
          <div class="my-bookings">
            <h3>我的预约（课程）：</h3>
            <ul class="list-group">
             
            </ul>
          </div>
        </div>
      </div>

      <!-- 推荐课程 -->
      <div class="row">
        <div class="col-md-12">
          <div class="recommended-courses">
            <h3>推荐课程：</h3>
            <div class="card-deck">
              <div class="card">
                <img src="./img/yujia.png" class="card-img-top" alt="瑜伽">
                <div class="card-body">
                  <h5 class="card-title">高级瑜伽课</h5>
                  <p class="card-text">提升你的柔韧性和心灵平静。</p>
                  <a href="#" class="btn btn-primary">了解更多</a>
                </div>
              </div>
              <div class="card">
                <img src="./img/liliang.png" class="card-img-top" alt="力量训练">
                <div class="card-body">
                  <h5 class="card-title">力量训练</h5>
                  <p class="card-text">增强肌肉力量，提高身体素质。</p>
                  <a href="#" class="btn btn-primary">了解更多</a>
                </div>
              </div>
              <div class="card">
                <img src="./img/youyang.png" class="card-img-top" alt="有氧运动">
                <div class="card-body">
                  <h5 class="card-title">有氧运动</h5>
                  <p class="card-text">燃烧脂肪，增强心肺功能。</p>
                  <a class="btn btn-primary">了解更多</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
  </section>






<!-- 在线留言 -->

<section class="contact-sec" id="contact">
<div class="box">
  <div class="container">
    <h2>在线留言 <small>对健身房的服务和教练的授课内容进行评价</small></h2>
    <div class="row">
      <div class="col-md-4">
        <div class="form-group">
          <label for="exampleName">姓名</label>
          <input type="text" class="form-control" id="exampleName" aria-describedby="nameHelp">
        </div>
      </div>
      <div class="col-md-4">
        <div class="form-group">
          <label for="examplePhone">电话号码</label>
          <input type="text" class="form-control" id="examplePhone" aria-describedby="phoneHelp">
        </div>
      </div>
      <div class="col-md-4">
        <div class="form-group">
          <label for="exampleInputEmail1">电子邮件地址</label>
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
          <small id="emailHelp" class="form-text text-muted">我们承诺不会与任何人分享您的电子邮件地址。</small>
        </div>
      </div>
      <div class="col-md-12">
        <div class="form-group">
          <label for="serviceRating">评价服务</label>
          <select class="form-control" id="serviceRating">
            <option>优秀</option>
            <option>良好</option>
            <option>一般</option>
            <option>差</option>
          </select>
        </div>
      </div>
      <div class="col-md-12">
        <div class="form-group">
          <label for="coachRating">评价教练</label>
          <select class="form-control" id="coachRating">
            <option>优秀</option>
            <option>良好</option>
            <option>一般</option>
            <option>差</option>
          </select>
        </div>
      </div>
      <div class="col-md-12">
        <label for="exampleTextarea">留言内容</label>
        <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
      </div>
      <div class="col-md-12 text-center action-block">
        <button id="submitFeedback" class="btn btn-capsul btn-aqua">提交</button>
      </div>
    </div>
  </div>
  </div>
</section>





<footer>
  <div class="container">
    <div class="row">
      <div class="col-md-2 col-sm-4">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Benefits</a></li>
          <li><a href="#">About</a></li>
        </ul>
      </div>
      <div class="col-md-2 col-sm-4">
        <ul>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Image Gallery</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
      <div class="col-md-2 col-sm-4">
        <ul>
          <li><a href="#">Privacy Policy</a></li>
          <li><a href="#">Term and Services</a></li>
          <li><a href="#">About Burnout</a></li>
        </ul>
      </div>
      <div class="col-md-6 col-sm-12">
        <h2>About our Blog</h2>
        <p>To enjoy good health, to bring true happiness to one's family, to bring peace to all, one must first discipline and control one's own mind. If a man can control his mind he can find the way to Enlightenment.</p>
      </div>
    </div>
    <div class="row copy-footer">
      <div class="col-sm-6 col-md-3"> &copy;<script type="text/javascript">document.write(new Date().getFullYear());</script> <a target="_blank" href="http://www.mobanwang.com/" title="网页模板">网页模板</a> </div>
      <div class="col-sm-6 col-md-3 pull-right text-xs-right"><i class="fa fa-heart"></i>  <a target="_blank" href="http://www.mobanwang.com/" title="模板王">模板王</a></div>
    </div>
  </div>
</footer>



<!-- Bootstrap core JavaScript--> 
<!-- Placed at the end of the document so the pages load faster --> 


<script src="./js/jquery.min.js" ></script> 
<script src="./js/bootstrap.min.js"></script> 
<script src="./js/scrollPosStyler.js"></script> 
<script src="./js/swiper.min.js"></script> 
<script src="./js/isotope.min.js"></script> 
<script src="./js/nivo-lightbox.min.js"></script> 
<script src="./js/wow.min.js"></script> 
<script src="./js/core.js"></script> 

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
<script src="./js/ie10-viewport-bug-workaround.js"></script>

<script src="./js/axios.min.js"></script> 
<script src="./js/jquery.js"></script> 
<script src="./js/index.js"></script>


<script>

</script>


</body>
</html>
